#{extends 'CRUD/layout.html' /}

<script type="text/javascript" src="@{'/tinymce/jscripts/tiny_mce/jquery.tinymce.js'}"></script>

<div id="crudShow" class="${type.name}">
	
	<h2 id="crudShowTitle">&{'crud.show.title', type.modelName}</h2>
	
	<div class="objectForm">
	#{form action:@save(object.id), enctype:'multipart/form-data'}
		#{crud.form fields:['title','content','status','tags']}
		#{crud.custom 'content'}
			<div class="crudField"> 
				<label for="object_content">内容</label> 
				<textarea id="object_content" name="object.content" rows="15" cols="80" style="width: 60%" class="tinymce">${object.content}</textarea> 
				<span class="crudHelp"> Required.</span> 
			</div> 
			<script type="text/javascript"> 
    		$().ready(function() {
					$('textarea.tinymce').tinymce({
						script_url : "@{'/tinymce/jscripts/tiny_mce/tiny_mce.js'}",
						theme : "advanced",
						// Theme options
						theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
						theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
						theme_advanced_buttons3 : "hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print",
						theme_advanced_toolbar_location : "top",
						theme_advanced_toolbar_align : "left",
						theme_advanced_statusbar_location : "bottom",
						theme_advanced_resizing : true
					});
				});
  		</script> 
		#{/crud.custom}
		#{crud.custom 'tags'}
        <label for="tags">
            &{'tags'}
        </label>
        <style type="text/css">
	        .tags-list .tag {
	            cursor: pointer;
	            padding: 1px 4px;
	            margin-right:2px;
	            color: #000;
	        }
	        .tags-list .selected {
	            background: #30A206;
	        }
	    </style>
	    <script type="text/javascript">
	        var toggle = function(tagEl) {
	            var input = document.getElementById('h'+tagEl.id);
	            if(tagEl.className.indexOf('selected') > -1) {
	                tagEl.className = 'tag';
	                input.value = '';
	            } else {
	                tagEl.className = 'tag selected';
	                input.value = tagEl.id;
	            }
	        }
	    </script>
	    <div class="tags-list">
	        #{list items:models.Tag.findAll(), as:'tag'}
	           <span id="${tag.id}" onclick="toggle(this)" 
	                class="tag ${object.tags.contains(tag) ? 'selected' : ''}">
	               ${tag}
	           </span> 
	           <input id="h${tag.id}" type="hidden" name="${fieldName}" 
	                    value="${object.tags.contains(tag) ? tag.id : ''}" />
	        #{/list}
	    </div>
    #{/crud.custom}
    
    #{/crud.form}
		<p class="crudButtons">
			<input type="submit" name="_save" value="&{'crud.save', type.modelName}" />
		</p>
	#{/form}
	</div>
	
	#{form @delete(object.id)}
		<p class="crudDelete">
			<input type="submit" value="&{'crud.delete', type.modelName}" />
		</p>
	#{/form}

</div>